<template>
    <div class="app">
        <div v-if="isShowEdit">
            <input type="text" v-model="editValue" ref="inp"/>
            <button>确认</button>
        </div>
        <div v-else>
            <span>{{ title }}</span>
            <button @click="handleEdit">编辑</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            title: '大标题',
            isShowEdit: false,
            editValue: '',
        }
    },
    methods: {
        handleEdit() {
            // 1.显示输入框
            this.isShowEdit = true
            // 2.让输入框获取焦点 - 此时直接操作是不成功的
            // 因为 Vue 是异步DOM更新的，这里还没渲染出来
            // this.$refs.inp.focus()

            // 使用 this.$nextTick(函数体) 等待DOM更新后，才会执行
            this.$nextTick(() => {
                console.log(this.$refs.inp)
                this.$refs.inp.focus()
            })
        }
    },
}
</script>

<style>
</style>